<template>
  <view class="custom-tab-bar-container">
    <view
        v-for="(item,index) in tabBarList"
        :class="['custom-tab-bar',item.isAI ? 'ai-tab-bar' : '']"
        :key="index"
    >
      <view v-if="item.isAI && isAILogin()">
        <img :class="['icon-img',item.isAI ? 'ai-img' : '']" :src="item.iconPath" alt="">
        <view class="tab-title">{{item.text}}</view>
        <button class="aiButtonClass"
                open-type="getPhoneNumber"
                @getphonenumber="handleBindMiniProgramAccount"></button>
      </view>
      <view v-else
            @click="handleNavDirect(item)">
        <img :class="['icon-img',item.isAI ? 'ai-img' : '']" :src="item.iconPath" alt="">
        <view class="tab-title">{{item.text}}</view>
      </view>
    </view>
    <view class="tab-column-container" >
      <view
          class="tab-column"
          v-for="(item,index) in tabColumnColorList"
          :key="index"
          :style="{background:item}"
      ></view>
    </view>

    <!--  小程序端用户信息绑定 popup  -->
    <wd-popup
        v-model="bindMiniProgramInfoApp"
        position="center"
        custom-style="border-radius:12rpx;"
    >
      <view style="padding: 50rpx;">
        <view class="label" style="padding: 5rpx 0;width: 100%;text-align:center;">AI功能需要获取用户手机号</view>
        <view style="padding-top: 30rpx;width: 100%;display:flex;justify-content: around;">
          <wd-button
              round type="primary" @click="closeBindPhone">
            取消
          </wd-button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <wd-button
              type="primary"
              open-type="getPhoneNumber"
              @getphonenumber="handleBindMiniProgramAccount"
          >
            确认获取
          </wd-button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script setup>
import {ref, getCurrentInstance} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
const instance = getCurrentInstance() // 获取当前实例对象

  const props = defineProps({
    selectedTabIndex: {
      type: Number,
      default: 1
    }
  });

  const tabBarList = ref ([
    {
      pagePath:"/pages/index/index",
      iconPath:"http://img.jowong.com/aba/2025-03-20/阿坝一机游第二版.cdr_4315_1742437859951.png",
      selectedIconPath:"",
      text:"一机游阿坝",
      isAI:false
    },
    {
      pagePath:"/pages/index/index",
      iconPath:"http://img.jowong.com/aba/2025-03-20/阿坝一机游第二版.cdr_84610_1742438751565.png",
      selectedIconPath:"",
      text:"地图",
      isAI:false
    },
    {
      pagePath:"/pages/index/index",
      iconPath:"http://img.jowong.com/aba/2025-03-20/阿坝一机游-2.cdr_18591_1742439563420.png",
      selectedIconPath:"",
      text:"小卓AI",
      isAI:true
    },
    {
      pagePath:"/pages/discover/index",
      iconPath:"http://img.jowong.com/aba/2025-03-20/阿坝一机游第二版.cdr_84620_1742439607661.png",
      selectedIconPath:"",
      text:"发现",
      isAI:false
    },
    {
      pagePath:"/pages/personalCenter/index",
      iconPath:"http://img.jowong.com/aba/2025-03-20/阿坝一机游第二版.cdr_84607_1742439667958.png",
      selectedIconPath:"",
      text:"我的",
      isAI:false
    },
  ]);
  const tabColumnColorList = ref([
      "#2b2b24","#a35b25","#508963","#a5dfc9","#e2d99e"
  ]);

const handleNavDirect = (item) => {
  let { pagePath } = item;
  // ai 模块需要单独的token校验
  if(item.isAI){
    if(!uni.getStorageSync('Authentication')){
      // 没有登录的的情况下需要先登录一下
      // yuanbin 登录页面暂时不跳转
      // uni.navigateTo({
      //   url: '/commonSubPack/pages/login/index'
      // })
      bindMiniProgramInfoApp.value = true;
      return;
    }
    uni.navigateTo({
      url: '/ai/pages/index'
    })
  } else {
    uni.redirectTo({
      url: pagePath
    })
  }
};
const isAILogin = () => {
  // ai视旅没有登录的的情况下需要先登录一下
  return !uni.getStorageSync('Authentication')
}

onLoad(() => {
});
</script>

<style lang="scss" scoped>
.custom-tab-bar-container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  display: flex;
  padding-top: 21rpx;
  padding-bottom: 30rpx;
  background: #26704E;
  .custom-tab-bar {
    width: 20%;
    text-align: center;
    .icon-img{
      width: 47rpx;
      height: 47rpx;
      background-size: cover;
    }
    .ai-img {
      position: absolute;
      top: -76rpx;
      left: 50%;
      margin-left: -50rpx;
      width: 100rpx;
      height: 148rpx;
      z-index:3;

    }
    .tab-title {
      color: #F8F3E8;
      font-size: 22rpx;
    }
  }
  .ai-tab-bar {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .tab-column-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 750rpx;
    height: 9.7rpx;
    top: -9rpx;
    left: 0;
    .tab-column{
      height: 100%;
      width: 18%;
    }
  }
}
.aiButtonClass{
  position: absolute;
  background: #f8f3e800;
  border: none!important;
  border-radius: 0;
  margin: 0;
  padding: 0;
  box-shadow: none!important;
  width: 20%;
  height: 170rpx;
  margin-top: -170rpx;
  z-index: 4;
  box-sizing: border-box;
  display: flex;
}
.aiButtonClass::after{
  content: '';
  border: none!important;
  margin: 0;
  padding: 0;
}
</style>
